<template>
  <div class="app-container home">
    <query-panel
      :form-data="queryParams"
      @handleQuery="handleQuery"
      @handleCustomize=handleCustomize
      :spacing="14"
      label-width="100px"
      :customize-type="8"
      customize-text="同步中台用户"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="登录名称：" prop="nickName">
            <el-input
              v-model="queryParams.nickName"
              placeholder="请输入登录名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户名称：" prop="userName">
            <el-input
              v-model="queryParams.userName"
              placeholder="请输入用户名称"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </query-panel>
    <table-panel
      ref="tablePanel"
      align="left"
      table-data="/system/user/list"
      :queryParams="queryParams"
      :columns="columns"
      :operateArray="operateArray"
      @onOperate="onOperate"
    >
    </table-panel>
  </div>
</template>

<script>
import TablePanel from "@/components/TablePanel/index.vue";
import QueryPanel from "@/components/QueryPanel/index.vue";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { soapQueryEmployeeInfo } from "@/api/system/user.js";
export default {
  name: "nodeIndex",
  components: {
    TablePanel,
    QueryPanel,
  },
  data() {
    return {
      queryParams: {
        nickName: "",
        userName: "",
      },
      operateArray: [
        {
          name: "授权",
          icon: "table_column_authorization",
        },
      ],
      columns: [
        {
          field: "userId",
          label: "用户ID",
        },
        {
          field: "userName",
          label: "登录名称",
        },
        {
          field: "nickName",
          label: "用户名称",
        },
        {
          label: "操作",
          width: "100px",
        },
      ],
      menuOptions: [],
    };
  },

  methods: {
    // 查询
    handleQuery() {
      this.$refs.tablePanel.getTable();
    },
    handleCustomize() {
      console.log(this.queryParams)
      soapQueryEmployeeInfo();
      this.handleQuery();
    },
    onOperate(type, row) {
      this.$router.push({
        path: "/systemManage/authorization",
        query: { id: row.userId, nickName: row.nickName, userName: row.userName },
      });
    },
  },
};
</script>

<style scoped lang="scss"></style>
